<script setup lang="ts">
import roleService from "../http/RoleService";
import TheCommonTable from "../components/the-common-table.vue";
import {ResourceQueryRendered, RoleQueryRendered} from "../http/Model";
import {ref} from "vue";
import resourceService from "../http/ResourceService";
import {message} from "ant-design-vue";

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '代码',
    dataIndex: 'code',
    key: 'code'
  }, {
    title: '操作',
    key: 'action'
  }
]

const editingForm: FormItem[] = [
  {
    label: "名称",
    dataIndex: "name",
    inputType: "text"
  }, {
    label: "代码",
    dataIndex: "code",
    inputType: "text"
  }
]

// 资源管理功能
const resourceDataSource = ref<ResourceQueryRendered[]>()
const resourceColumns = [{
  title: '名称',
  dataIndex: 'name',
  key: 'name'
}, {
  title: '代码',
  dataIndex: 'code',
  key: 'code'
}, {
  title: '请求方法',
  dataIndex: 'method',
  key: 'method'
}, {
  title: 'Uri',
  dataIndex: 'uri',
  key: 'uri'
}, {
  title: '状态',
  dataIndex: 'status',
  key: 'status'
}, {
  title: '操作',
  key: 'action'
}]
const resourceTableLoading = ref(false)
const resourceModalVisible = ref(false)
const resourceModalLoading = ref(false)
const editingRole = ref<RoleQueryRendered>()

const selectedRowKeys = ref<string[]>([])
const rowSelection = ref({
  selectedRowKeys: selectedRowKeys,
  checkStrictly: false,
  onChange: (changeableRowKeys: (string | number)[], selectedRows: RoleQueryRendered[]) => {
    selectedRowKeys.value = selectedRows.map(role => role.code!)
  },
  onSelect: (record: RoleQueryRendered, selected: boolean, selectedRows: RoleQueryRendered[]) => {
    // console.log('on select: ', record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: RoleQueryRendered[], changeRows: RoleQueryRendered[]) => {
    // console.log('on select all', selected, selectedRows, changeRows);
  },
});

const refreshResourceTable = async (record: RoleQueryRendered) => {
  resourceDataSource.value = (await resourceService.findAll()).data.data
  selectedRowKeys.value = (await roleService.getResources(record.code!)).data.data.map((resource: { code: any; }) => resource.code)
}

const editRoles = (role: RoleQueryRendered) => {
  editingRole.value = role
  resourceModalVisible.value = true
  refreshResourceTable(role)
}

const roleModalOkHandler = () => {
  resourceModalLoading.value = true
  roleService.replaceResources(editingRole.value?.code!, selectedRowKeys.value).then(({data}) => {
    if (data.success) {
      message.success("更新资源成功")
      resourceModalVisible.value = false
    } else {
      message.error(data.message)
    }
  }).finally(() => {
    resourceModalLoading.value = false
  })
}
</script>

<template>
  <!--表格-->
  <the-common-table :service="roleService"
                    editing-value-key-name="code"
                    :columns="columns"
                    :editing-form="editingForm">
    <!--自定义列-->
    <template #custom-columns="{column, record}">
    </template>
    <!--自定义操作按钮-->
    <template #custom-action="{column, record}">
      <a-button @click="editRoles(record)">资源管理</a-button>
    </template>
  </the-common-table>
  <!--资源编辑弹窗-->
  <a-modal title="角色列表" cancel-text="取消" ok-text="确定" v-model:visible="resourceModalVisible"
           v-model:confirm-loading="resourceModalLoading"
           width="1000px"
           @ok="roleModalOkHandler">
    <a-table :columns="resourceColumns" :data-source="resourceDataSource" :loading="resourceTableLoading"
             row-key="code" :row-selection="rowSelection" :pagination="false">
    </a-table>
  </a-modal>
</template>

<style scoped>

</style>